<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>资源管理_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
</head>
<body>
<div th:include="common/header" class="header-wrapper"></div>
<div class="container-wrapper">
    <div th:include="common/menu" class="menu-left"></div>
    <div class="menu-right">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>资源管理</legend>
        </fieldset>
        <div class="layui-form" style="padding: 10px 0;">
            <div class="layui-inline">
                <label class="layui-form-label">资源名称：</label>
                <div class="layui-input-inline">
                    <input type="text" id="resName" style="width: 300px" placeholder="请输入" autocomplete="off" class="layui-input" onkeydown="if(event.keyCode==13) search()" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">审核状态：</label>
                <div class="layui-input-inline">
                    <select id="checkStatus">
                        <option value="">请选择审核状态</option>
                        <option value="1">未审核</option>
                        <option value="2">审核通过</option>
                        <option value="3">审核未通过</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" onclick="search()">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
        <table id="resListTable" lay-filter="resListTable"></table>
    </div>
</div>
<div th:include="common/link" class="wrapper"></div>
<div th:include="common/footer" class="footer-wrapper"></div>

<script type="text/html" id="toolbarTpl">
    <button class="layui-btn layui-btn-sm" lay-event="add">发布资源</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <p style="color: red;">
        1、鼠标移动到红色“审核未通过”字体上，能显示未通过原因；
        2、审核未通过的，请重新编辑资源，然后提交审核
    </p>
</script>
<script type="text/html" id="toolTpl">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    let $, layer, table;
    layui.use(['layer', 'element', 'table'], function () {
        $ = layui.jquery;
        layer = layui.layer;
        table = layui.table;

        table.render({
            elem: '#resListTable',
            toolbar: '#toolbarTpl',
            url: '/res/userResList',
            cols: [[
                {type: 'checkbox'},
                {field: 'name', width: 350, title: '资源名称', templet: formatName},
                {field: 'resType', width: 100, title: '所属类别', templet: formatResTypeName},
                {field: 'points', width: 60, title: '积分', align: 'center'},
                {field: 'publishDate', width: 120, title: '发布日期', sort: true, align: 'center'},
                {field: 'checkStatus', width: 100, title: '审核状态', align: 'center', templet: formatCheckStatus},
                {field: 'action', width: 150, title: '操作', align: 'center', templet: '#toolTpl'}
            ]],
            page: true
        });

        // 触发工具栏事件
        table.on('toolbar(resListTable)', function (obj) {
            switch (obj.event) { // 获得 lay-event 对应的值
                case 'add': // 发布资源
                    window.location.href='/res/public.html'
                    break;
                case 'delete': // 删除
                    deleteSelected();
                    break;
            }
        });

        // 触发单元格工具事件
        table.on('tool(resListTable)', function (obj) {
            let data = obj.data; // 获得当前行数据
            switch (obj.event) { // 获得 lay-event 对应的值
                case 'edit': // 编辑
                    window.location.href = "/res/edit/" + data.id;
                    break;
                case 'delete': // 删除
                    deleteOne(data.id);
                    break;
            }
        });
    });

    function search() {
        table.reload("resListTable", {
            page: {
                curr: 1
            },
            where: {
                name: $("#resName").val(),
                checkStatus: $("#checkStatus").val()
            }
        });
    }

    function formatName(d) {
        if (d.checkStatus == 2) {
            return '<a href="/res/detail/' + d.id + '" target="_blank">' + d.name + '</a>';
        } else {
            return d.name;
        }
    }

    function formatResTypeName(d) {
        if (d.resType == null) {
            return '';
        } else {
            return d.resType.name;
        }
    }

    function formatCheckStatus(d) {
        if (d.checkStatus == 1) {
            return '未审核';
        } else if (d.checkStatus == 2) {
            return '<label style="color:blue;">审核通过</label>';
        } else if (d.checkStatus == 3) {
            return '<a href="#" title="审核未通过原因：' + d.reason + '"><label style="color:red">审核未通过</label></a><br/>';
        }
    }

    function deleteOne(id) {
        layer.confirm('您确定要删除这条记录吗？', {
            title: "系统提示",
            btn: ['确定', '取消'] //按钮
        }, function () {
            layer.closeAll('dialog');
            $.post("/res/delete", {"id": id}, function (result) {
                if (result.success) {
                    layer.msg("删除成功！");
                    table.reload("resListTable", {});
                } else {
                    layer.msg("删除失败，请联系管理员！");
                }
            }, "json");
        }, function () {

        });
    }

    function deleteSelected() {
        let check = table.checkStatus('resListTable');
        if (check.data.length == 0) {
            layer.msg("请选择要删除的数据！");
            return;
        }
        let strIds = [];
        let rows = check.data;
        for (let i = 0; i < check.data.length; i++) {
            strIds.push(rows[i].id);
        }
        let ids = strIds.join(",");
        layer.confirm('您确定要删除这<label style="color: red;">' + check.data.length + '</label>条记录吗？', {
            title: '系统提示',
            btn: ['确定', '取消'] //按钮
        }, function () {
            layer.closeAll('dialog');
            $.post("/res/deleteBatch", {"ids": ids}, function (result) {
                if (result.success) {
                    layer.msg("删除成功！");
                    table.reload("resListTable", {});
                } else {
                    layer.msg("删除失败，请联系管理员！");
                }
            }, "json");
        }, function () {

        });
    }
    /*]]>*/
</script>
</body>
</html>